<template>
	<view class="spenders-page spendersbg">
		<u-sticky :bgColor="scrollTop > 20?'#110124':'transparent'" customNavHeight="0" offsetTop="0" class="z-index">
			<u-navbar title="" :autoBack="false" bg-color="transparent" leftIconColor="#ffffff"
				:titleStyle="{'color':'#ffffff'}" @leftClick="leftClick">
				<view slot="center">
					<u-tabs :list="topTab" lineWidth="30" lineColor="#ffffff" :activeStyle="{
			        color: '#FFFFFF',
			        fontWeight: 'bold',
			        transform: 'scale(1.05)'
			    }" :inactiveStyle="{
			        color: 'rgba(255, 255, 255, 0.7)',
			        transform: 'scale(1)'
			    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @change="changeClub"></u-tabs>
				</view>
			</u-navbar>

			<u-gap height="150" bgColor="transparent"></u-gap>
			<view class="flex align-center bgrgba1 rounded-circle h-68 justify-between px-1 dateTab">
				<view class="text-white fs-28 font-weight-light dateTabitem rounded-circle  text-center"
					v-for="(item,index) in dateTab" :key="index" :class="currentDateName === item.type?'bg110124':''"
					@tap="changeDateTab(item)">
					{{item.name}}
				</view>
			</view>
			<u-gap height="20" bgColor="transparent"></u-gap>
		</u-sticky>

		<view class="rank-list">
			<view class="clearfix position-relative pt-3 box-sizing" style="min-height: 229px;" v-if="dataList.length">
				<view class="topbox " v-for="(item,index) in dataList.slice(0,3)" :key="index"
					:class="[`top${index + 1}`,index === 0?'position-absolute':'']">
					<view class="position-relative flex align-center justify-center pt-2">
						<image class="rounded-circle mt-5 bgF1F4FF" :src="item.avatar" mode="aspectFill"
							style="width: 156rpx;height: 156rpx;"></image>
						<image class="position-absolute top-0 left-0 right-0" :src="`/static/imgs/spenders_top${index + 1}.png`"
							mode="aspectFill" style="width: 304rpx;height: 304rpx;"></image>
					</view>
					<view class="text-white fs-28 font-weight-bold text-center mt-6">{{item.nickname}}</view>
					<view class="fs-24 text-white font-weight-light flex align-center justify-center mt-2">{{item.total_amount}}
						<image src="/static/imgs/jinbi.png" mode="aspectFill" class="w-28 h-28 ml-1"></image>
					</view>
				</view>
			</view>
			<nodata v-if="dataList.length === 0"></nodata>

			<view class="rounded-lg bg-white p-2" v-if="dataList.length > 3">
				<view v-for="(item,index) in dataList.slice(3)" :key="index"
					class="flex align-center bgF3F5FA mb-2 p-2 rounded-lg">
					<text class="ft574C70 fs-28 font-weight-bold">{{index + 4}}</text>
					<image :src="item.avatar" mode="aspectFill" class="rounded-circle mx-2 bgF1F4FF"
						style="width: 88rpx;height: 88rpx;">
					</image>
					<text class="fs-28 font-weight-bold text-black flex-1">{{item.nickname}}</text>
					<text class="ft2C0B53 fs-24 font-weight-bold">{{item.total_amount}}</text>
					<image src="/static/imgs/jinbi.png" mode="aspectFill" class="w-28 h-28 ml-1"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import HttpApi from '@/api/httpApi';
	export default {
		data() {
			return {
				curentClub: 1,
				currentDateName: 1,
				scrollTop: 0,
				page: 1,
				dataList: [],
				tempList: [],
			}
		},
		computed: {
			topTab() {
				return [{
					name: this.$t('hhh.t152'),
					type: 1
				}, {
					name: this.$t('hhh.t153'),
					type: 0
				}]
			},
			dateTab() {
				return [{
						name: this.$t('hhh.t154'),
						type: 1
					},
					{
						name: this.$t('hhh.t155'),
						type: 2
					},
					{
						name: this.$t('hhh.t156'),
						type: 3
					},
				]
			},
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onReachBottom() {
			if (this.tempList.length < 20) return
			this.page++
			this.consumption()
		},
		created() {
			this.consumption()
		},
		methods: {
			changeClub(val) {
				this.curentClub = val.type
				this.page = 1
				this.dataList = []
				uni.$tools.showLoading()
				this.consumption()
			},
			consumption() {
				HttpApi.consumption({
					is_global: this.curentClub,
					type: this.currentDateName,
					page: this.page,
					limit: 20
				}).then(res => {
					if (res.code === 1) {
						const list = res.data || []
						this.tempList = list
						if (this.page === 1) {
							this.dataList = list
						} else {
							this.dataList = this.dataList.concat(list)
						}
					}
				}).finally(() => {
					uni.hideLoading()
				})
			},
			changeDateTab(item) {
				this.currentDateName = item.type
				this.page = 1
				this.dataList = []
				uni.$tools.showLoading()
				this.consumption()
			}
		}
	}
</script>

<style lang="scss">
	.spenders-page {
		.dateTab {
			margin: 0 108rpx;
		}

		.dateTabitem {
			width: 30%;
			height: 56rpx;
			line-height: 56rpx;
		}

		.rank-list {
			.topbox {
				width: 304rpx;
			}

			.top1 {
				left: 50%;
				transform: translateX(-152rpx);
				z-index: 999;
			}

			.top2 {
				float: left;
				margin-top: 50rpx;
			}

			.top3 {
				float: right;
				margin-top: 50rpx;
			}
		}
	}
</style>